<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="`${
      !isEdit ? '新增定损案件' : '修改定损案件 - ' + formData.case_number
    }`"
    :visible="visible"
    :before-close="onClose"
    :style="{ 'max-height': '100vh' }"
    width="50%"
  >
    <!-- <div style="max-height: 70vh; overflow-y: auto"> -->
      <el-form
        style="padding: 0 30px"
        ref="form"
        label-width="120px"
        :model="form"
        :rules="rules"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="案件号" prop="case_number">
              <el-input
                :disabled="editType"
                placeholder="请输入案件号"
                v-model="form.case_number"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物损类型" prop="damage_type">
              <el-select
                clearable
                placeholder="请选择物损类型"
                v-model="form.damage_type"
              >
                <el-option
                  v-for="(e, i) in materialDamageList"
                  :key="i"
                  :value="e.value"
                  :label="e.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!-- <el-col :span="12">
            <el-form-item label="物损方" prop="damage_customer_name">
              <el-input
                v-model="form.damage_customer_name"
                placeholder="请输入物损方"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物损方电话" prop="damage_customer_phone">
              <el-input
                v-model="form.damage_customer_phone"
                placeholder="请输入物损方电话"
              ></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="车牌号" prop="car_number">
              <el-input
                v-model="form.car_number"
                placeholder="请输入车牌号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事故地" prop="address_code">
              <el-cascader
                v-model="form.address_code"
                placeholder="请选择省市区"
                :options="options"
                ref="classifyRef"
                @change="handleChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="详细地址" prop="accident_address">
              <el-input
                v-model="form.accident_address"
                placeholder="请输入详细地址"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="查勘员" prop="surveyer">
              <el-input
                v-model="form.surveyer"
                placeholder="请输入查勘员"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="核损价格" prop="write_off_price">
              <el-input
                v-model="form.write_off_price"
                placeholder="请输入核损价格"
              ></el-input>
            </el-form-item> -->
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <!-- <el-form-item label="物损方确定报价" prop="damage_customer_price">
              <el-input
                v-model="form.damage_customer_price"
                placeholder="请输入物损方确定报价"
              ></el-input>
            </el-form-item> -->
            <el-form-item label="物损方及电话" prop="damage_customer">
              <el-input
                v-model="form.damage_customer"
                placeholder="请输入物损方及电话"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开户行" prop="opening_bank">
              <el-input
                v-model="form.opening_bank"
                placeholder="请输入开户行"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="银行卡号" prop="bank_account_number">
              <el-input
                v-model="form.bank_account_number"
                placeholder="请输入银行卡号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保险公司" prop="insurer">
              <el-input
                v-model="form.insurer"
                placeholder="请输入保险公司"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            
          </el-col>
          <el-col :span="12">
            <el-form-item label="税率" prop="tax_rate">
              <el-input v-model="form.tax_rate" placeholder="请输入税率">
                <template slot="append">%</template></el-input
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remarks">
          <el-input
            v-model="form.remarks"
            type="textarea"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="onEnter">提 交</el-button>
      </div>
    <!-- </div> -->
  </el-dialog>
</template>

<script>
import { regionData } from "element-china-area-data";
import { surveyorList } from "@/api/system/caseManage";
export default {
  name: "caseEdit",
  components: {},
  data() {
    return {
      options: regionData,
      editType: false,
      areaNames: [],
      materialDamageList: [
        { label: "工程机械类", value: 1 },
        { label: "房屋建筑类", value: 2 },
        { label: "道路设施类", value: 3 },
        { label: "电力/通讯设施类", value: 4 },
        { label: "园林绿化类", value: 5 },
        { label: "庄稼食品类", value: 6 },
        { label: "电器设备类", value: 7 },
        { label: "财产险物损类", value: 8 },
      ],
      form: {},
      rules: {
        case_number: [{ required: true, message: "必需", trigger: ["blur"] }],
        // damage_type: [{ required: true, message: "必需", trigger: ["blur"] }],
        // car_number: [{ required: true, message: "必需", trigger: ["blur"] }],
        // address_code: [{ required: true, message: "必需", trigger: ["blur"] }],
        // accident_address: [
        //   { required: true, message: "必需", trigger: ["blur"] },
        // ],
        // damage_customer_name: [
        //   { required: true, message: "必需", trigger: ["blur"] },
        // ],
        // damage_customer_phone: [
        //   { required: true, message: "必需", trigger: ["blur"] },
        // ],
        // write_off_price: [
        //   { required: true, message: "必需", trigger: ["blur"] },
        // ],
        // damage_customer_price: [
        //   { required: true, message: "必需", trigger: ["blur"] },
        // ],
        // opening_bank: [{ required: true, message: "必需", trigger: ["blur"] }],
        // bank_account_number: [
        //   { required: true, message: "必需", trigger: ["blur"] },
        // ],
        // insurer: [{ required: true, message: "必需", trigger: ["blur"] }],
        // surveyer: [{ required: true, message: "必需", trigger: ["blur"] }],
        // tax_rate: [{ required: true, message: "必需", trigger: ["blur"] }],
      },
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default() {
        return {};
      },
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    // this.getSurveyor();
  },
  computed: {},
  watch: {
    formData(e) {
      console.log(e, "KKKKKKKKK");
      this.form = {
        ...e,
      };
      if (this.form.address_code) {
        this.form.address_code = this.form.address_code.split(",");
      }
    },
    visible(v) {
      v && this.validateReset();
    },
  },
  methods: {
    getSurveyor() {
      surveyorList().then((res) => {});
    },
    handleChange(e) {
      if (e) {
        this.areaNames = e
          .map((code) => this.findAreaByCode(code, this.options)?.label)
          .filter(Boolean);
      }
    },
    findAreaByCode(code, options) {
      const found = options.find((option) => option.value === code);
      if (found) return found;
      for (const option of options) {
        if (option.children) {
          const childFound = this.findAreaByCode(code, option.children);
          if (childFound) return childFound;
        }
      }
      return null;
    },
    validateReset() {
      this.$refs.form && this.$refs.form.clearValidate();
    },
    onClose() {
      this.$emit("onClose");
    },
    onEnter() {
      this.$refs.form.validate((res) => {
        let params = {
          id: this.form.id,
          case_number: this.form.case_number,
          damage_type: this.form.damage_type,
          province: this.areaNames[0],
          city: this.areaNames[1],
          area: this.areaNames[2],
          accident_address: this.form.accident_address,
          address_code: this.form.address_code,
          // damage_customer_name: this.form.damage_customer_name,
          // damage_customer_phone: this.form.damage_customer_phone,
          car_number: this.form.car_number,
          damage_customer: this.form.damage_customer,
          // write_off_price: this.form.write_off_price,
          // damage_customer_price: this.form.damage_customer_price,
          // construction_amount: this.form.construction_amount,
          surveyer: this.form.surveyer,
          opening_bank: this.form.opening_bank,
          bank_account_number: this.form.bank_account_number,
          insurer: this.form.insurer,
          tax_rate: this.form.tax_rate,
          remarks: this.form.remarks,
        };
        if (!this.form.id) {
          delete params.id;
        }
        console.log(params, "OOOOOOO");
        if (res) {
          this.$emit("onEnter", params);
        }
      });
    },
  },
};
</script>

<style scoped>
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -30px;
}
</style>
